<template>
    <el-dialog
    :title="title"
    top="2vh"
    width="70%"
    v-if="visibleCombination"
    append-to-body
    :close-on-click-modal="false"
    :before-close="close"
    :visible.sync="visibleCombination">
    <el-form :model="combinationInfo" label-width="120px" ref="combinationRef">
      <el-row>
        <el-col :span="12">
        <el-form-item label="产品组件名称" prop="combinationName" :rules="[{ required:true, message: '不能为空', trigger: 'blur' }]">
        <el-input class="wp-form-280" v-model.trim="combinationInfo.combinationName" placeholder="产品组件名称"></el-input>
        </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="备注">
                  <el-input class="wp-form-280"  type="textarea" v-model="combinationInfo.combinationRemark" placeholder="备注"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    <ProductTransfer v-model="combinationInfo.productList" :list="productList"/>
    </el-form>
      <div style="text-align: center">
          <el-button type="" @click="close">取 消</el-button>
          <el-button type="success" @click="save">确 定</el-button>
      </div>
  </el-dialog>
</template>
<script>
import ProductTransfer from './ProductTransfer'
import {toDecimal} from '@/utils'
export default {
  props: {
    title: String,
    visible: Boolean,
    list: Array,
    contractDataInfoList: Array
  },
  components: {ProductTransfer},
  watch: {
    visible: {
      handler (val) {
        this.visibleCombination = val
      },
      immediate: true
    },
    list: {
      handler (val) {
        if (val) {
          this.productList = [...val]
        }
      },
      immediate: true,
      deep: true
    },
    visibleCombination (val) {
      this.$emit('update:visible', val)
    }
  },
  data () {
    return {
      visibleCombination: false,
      productList: [],
      combinationInfo: {}
    }
  },
  methods: {
    close () {
      this.visibleCombination = false
    },
    save () {
      this.$refs.combinationRef.validate(validate => {
        if (validate) {
          const cdata = this.contractDataInfoList.find(v => v.combinationName === this.combinationInfo.combinationName)
          if (cdata && cdata !== null) {
            this.$msgBox.error('已存在相同的产品组件名称了')
            return
          }
          if (!this.combinationInfo.productList || this.combinationInfo.productList.lenght > 0) {
            this.$msgBox.error('产品不能为空')
            return
          }
          this.combinationInfo.totalAmount = this.jsTotal(this.combinationInfo.productList)
          this.$emit('save', this.combinationInfo)
          this.close()
        }
      })
    },
    jsTotal (productList) {
      const t = productList.reduce((sum, item) => {
        const dd = toDecimal(item.productNum * item.actualPrice)
        return sum + dd||0
      }, 0)
      return toDecimal(t)
    }
  }
}
</script>

<style lang="scss" scoped>
.setting-box{
    margin-bottom: 5px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    border-bottom: 1px solid #f2f2f2;
}
.desc{
   width: 100px;
   height: 50px;
   line-height: 50px;
   text-overflow:ellipsis;
   white-space:nowrap;
   overflow:hidden;
}
</style>
